<template>
  <div class="bg-white border border-news-border rounded-sm p-3">
    <h2 class="text-lg font-bold py-2 border-b border-news-border">
      <i class="fa fa-line-chart text-secondary mr-1"></i> 市场行情
    </h2>
    
    <!-- 指数概览 -->
    <div class="py-3">
      <div class="flex flex-wrap gap-4 justify-between">
        <div class="text-center">
          <div class="text-sm text-gray-600">上证指数</div>
          <div class="text-xl font-bold mt-1">3087.35</div>
          <div class="text-sm text-red-500">-7.48 (-0.24%)</div>
        </div>
        <div class="text-center">
          <div class="text-sm text-gray-600">深证成指</div>
          <div class="text-xl font-bold mt-1">9872.15</div>
          <div class="text-sm text-green-500">+23.67 (+0.24%)</div>
        </div>
        <div class="text-center">
          <div class="text-sm text-gray-600">创业板指</div>
          <div class="text-xl font-bold mt-1">1978.42</div>
          <div class="text-sm text-green-500">+15.83 (+0.81%)</div>
        </div>
        <div class="text-center">
          <div class="text-sm text-gray-600">科创50</div>
          <div class="text-xl font-bold mt-1">867.35</div>
          <div class="text-sm text-red-500">-4.21 (-0.48%)</div>
        </div>
      </div>
    </div>
    
    <!-- 股票列表 -->
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="bg-gray-50">
            <th class="text-left py-2 px-1">股票名称</th>
            <th class="text-right py-2 px-1">最新价</th>
            <th class="text-right py-2 px-1">涨跌额</th>
            <th class="text-right py-2 px-1">涨跌幅</th>
            <th class="text-right py-2 px-1">成交量(万)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(stock, index) in stockList" :key="index" class="border-t border-gray-100 hover:bg-gray-50">
            <td class="py-2 px-1">{{ stock.name }}</td>
            <td class="text-right py-2 px-1">{{ stock.price }}</td>
            <td :class="stock.change > 0 ? 'text-green-500' : 'text-red-500'" class="text-right py-2 px-1">
              {{ stock.change > 0 ? '+' : '' }}{{ stock.change }}
            </td>
            <td :class="stock.changePercent > 0 ? 'text-green-500' : 'text-red-500'" class="text-right py-2 px-1">
              {{ stock.changePercent > 0 ? '+' : '' }}{{ stock.changePercent }}%
            </td>
            <td class="text-right py-2 px-1">{{ stock.volume }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- 查看更多按钮 -->
    <div class="text-center mt-3">
      <a href="#" class="text-primary text-sm hover:underline">
        查看更多行情 <i class="fa fa-angle-right"></i>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StockMarket',
  data() {
    return {
      stockList: [
        { name: '贵州茅台', price: '1687.52', change: '-18.48', changePercent: '-1.08', volume: '1256' },
        { name: '宁德时代', price: '178.35', change: '+5.21', changePercent: '+3.00', volume: '2568' },
        { name: '比亚迪', price: '245.68', change: '+8.72', changePercent: '+3.68', volume: '3892' },
        { name: '隆基绿能', price: '28.35', change: '-1.25', changePercent: '-4.23', volume: '1876' },
        { name: '中际旭创', price: '68.21', change: '-3.56', changePercent: '-4.98', volume: '1254' }
      ]
    }
  }
}
</script>

<style scoped>
/* 股票行情组件的样式 */
</style>